<template>
  <div class="contentDiv">
    <div style="padding-left: 20px">
      <a-button plain @click="downloadXML">下载xml</a-button>
    </div>
    <div class="canvas" ref="canvas"></div>
    <div id="properties-panel"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
// 引入相关的依赖
import BpmnModeler from "bpmn-js/lib/Modeler";
import propertiesPanelModule from "bpmn-js-properties-panel";
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda";
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda";
import customTranslate from "./customTranslate/customTranslate"; // 汉化包引入
import { xmlStr } from "./xmlStr"; // 流程图初始配置，编辑的话只需要相同格式的文件替换即可

const bpmnModeler = ref(null);
const canvas = ref(null);

onMounted(() => {
    init()
});

const init = () => {
  // 将汉化包包装成一个模块
  const customTranslateMolude = {
    translate: ["value", customTranslate],
  };
  bpmnModeler.value = new BpmnModeler({
    // 建模
    container: canvas.value,
    propertiesPanel: {
      // 添加控制板
      parent: "#properties-panel",
    },
    additionalModules: [
      // 右边的属性栏
      propertiesProviderModule,
      propertiesPanelModule,
      customTranslateMolude, // 汉化模块
    ],
    moddleExtensions: {
      camunda: camundaModdleDescriptor,
    },
  });
  createNewDiagram();
};
const createNewDiagram = async () => {
  // 将字符串转换成图显示出来
  bpmnModeler.value.importXML(xmlStr).then((info) => {
    if (info.error) {
      console.log(info.error);
    } else {
      success();
    }
  });
};
const success = () => {
  console.log("创建成功!");
  bpmnModeler.value.on("commandStack.changed", () => {
    // console.log(111111);
    getXML().then((xml) => {
      console.log(xml);
    });
  });
};

const getXML = () => {
  return new Promise((resolve, reject) => {
    bpmnModeler.value.saveXML({ format: true }, (err, xml) => {
      console.log(xml);
      err ? reject(err) : resolve(xml);
    });
  });
};
const downloadXML = async () => {
  const { xml } = await bpmnModeler.value.saveXML({ format: true });
  console.log(xml);
};
</script>

<style lang="scss" scoped>
.contentDiv {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: calc(100vh - 64px);
  overflow: auto;
}
.canvas {
  width: 100%;
  height: calc(100% - 32px);
}
#properties-panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
  height: calc(100vh - 64px);
  overflow: auto;
}
:deep(.bjs-powered-by){
    display: none !important;
}
</style>
